import React, { ReactNode,FC, useContext,useState, FunctionComponentElement} from "react";
import classNames from "classnames";
import { MenuContext } from './menu';
import { MenuItemProps } from './menuItem';
import Icon from "../Icon/icon";
//import { CSSTransition} from "react-transition-group";
import Transition from "../Transition/transition";

export interface SubMenuProps {
  index?: string;
  /**下拉菜单选项的文字 */
  title: string;
  /**下拉菜单选型的扩展类名 */
  className?: string;
  children?: ReactNode;
}

const SubMenu: FC<SubMenuProps> = ({ index,title,children,className }) => { 

  const context = useContext(MenuContext)
  const openedSubMenus = context.defaultOpenSubMenus as Array<string>
  const isOpend = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false
  const [menuOpen, setOpen] = useState(isOpend)
  
  const classes = classNames('menu-item submenu-item', className, {
    'is-active': context.index === index,
    'is-opened': menuOpen,
    'is-vertical': context.mode === 'vertical'
  })

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault()//阻止默认行为
    setOpen(!menuOpen)
  }

  let timer: any
  const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
    clearTimeout(timer)
    e.preventDefault()
    timer = setTimeout(() => {
      setOpen(toggle)
    }, 150)
  }

  // vertical 点击触发
  const clickEvents = context.mode === 'vertical' ? {
    onClick: handleClick
  } : {}

  // horizontal 移入 移出 触发
  const hoverEvents = context.mode !== 'vertical' ? {
    onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true)},
    onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false)}
  } : {}

  const renderChildren = () => {
    const subMenuClasses = classNames("mx-submenu", {
      "menu-opened": menuOpen
    })
    const childrenComponent = React.Children.map(children, (child, i) => { 
      const childElement = child as FunctionComponentElement<MenuItemProps>
      if (childElement.type.displayName === "MenuItem") { 
        return React.cloneElement(childElement, {
          index: `${index}-${i}`
        })
      } else {
        console.error("Warning: SubMenu has a child which is not a MenuItem component")
      }
    })
    return (
      <Transition in={menuOpen} timeout={ 300 } animation="zoom-in-top">
        <ul className={ subMenuClasses }>
         { childrenComponent }
        </ul>
      </Transition>
      
    )
  }

  return (
    <li key={index} className={classes} {...hoverEvents}>
      <div className="submenu-title" {...clickEvents}>
        {title}
        <Icon icon="angle-down" className="arrow-icon"></Icon>
      </div>
      { renderChildren()}
    </li>
  )
}

SubMenu.displayName = "SubMenu"
export default SubMenu

